<template>
	<div
		:class="{ focus: isFocus }"
		:style="{ height: height + 'px' }"
		class="ui-input_textarea"
		tabindex="2"
	>
		<div class="ibox icon-wrap" v-show="prevIcon">
			<i :class="prevIcon" />
		</div>
		<textarea
			:placeholder="placeholder"
			:value="value"
			@blur="onBlur"
			@change="onChange"
			@focus="onFocus"
			autocomplete="off"
			class="textarea__inner"
			tabindex="6"
		/>
		<div class="ibox icon-wrap" v-show="suffixIcon">
			<i :class="suffixIcon" />
		</div>
	</div>
</template>

<script>
export default {
	name: "YTextarea",
	data() {
		return {
			isFocus: false,
		};
	},
	props: {
		value: [String, Number],
		placeholder: String,
		suffixIcon: String,
		prevIcon: String,
		height: {
			type: Number,
			default: 30,
		},
		type: {
			type: String,
			default: "text",
			validator: (value) => {
				if (value === "password" || value === "text") {
					return true;
				}
				return false;
			},
		},
	},
	methods: {
		onFocus() {
			this.isFocus = true;
		},
		onBlur() {
			this.isFocus = false;
		},
		onChange(e) {
			console.log("[  ]", e.target.value + "");
			this.$emit("input", e.target.value);
			this.$emit("change", e.target.value);
		},
	},
};
</script>
<style lang="stylus" scoped>
.textarea__inner {
	display: block;
	resize: vertical;
	padding: 5px 15px;
	line-height: 1.5;
	box-sizing: border-box;
	width: 100%;
	font-size: inherit;
	color: #fff;
	background-color: RGB(38, 44, 51);
	background-image: none;
	// border: 1px solid #409eff;
	border-radius: 4px;
	// transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	min-height: 33px;
	margin-top: 0px;
	margin-bottom: 0px;
  &:focus {
		outline: none;
		border-color: #2681ff;
	}

}
.ui-input_textarea {
	background: #1c222b;
	color: #fff;
	width: 100%;
}
</style>
